<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="todo-list-app">
        <ol>
            <todo-item 
                v-for='item in groceryList'
                v-bind:todo='item'
                v-bind:key='item.id'></todo-item>
        </ol>
    </div>

    <script>
        const TodoList={
            data() {
                return {
                    groceryList:[
                        {id: 0, text: 'vegetables'},
                        {id: 1, text: 'cheese'},
                        {id: 2, text: 'whatever else humans are supposed to eat'},
                    ]
                }
            },
        }
        const app = Vue.createApp(TodoList)
        app.component('todo-item',{
            props:[
                'todo'
            ],
            template:`<li>{{todo.text}}</li>`
        })
       const vm=  app.mount('#todo-list-app')

    </script>
</body>
</html>